<template>
  <el-checkbox-group
    v-model="modelValue"
    @change="handleChange"
  >
    <el-checkbox
      v-for="item in options"
      :key="item.key"
      :value="item.key"
    >{{item.value}}</el-checkbox>
  </el-checkbox-group>
</template>

<script setup>
import { ref, watch } from 'vue';
import { getDictionary } from '@/utils/system';

const modelValue = defineModel();
const emit = defineEmits(['change']);
const props = defineProps({
  dictCode: String,
});

const options = ref([]);

const handleChange = () => {
  emit('change');
};

const loadDicAndShow = async(dictCode) => {
  if ((dictCode || '') === '') {
    options.value = [];
  } else {
    options.value = await getDictionary(dictCode);
  }
};

const init = (dictCode) => {
  loadDicAndShow(dictCode);
};

watch(() => props.dictCode, (data) => {
  init(data);
}, {immediate: true});
</script>